<template>
    <div class="flow-warp">
        <a-card :bordered="false" class="search-card">
            <!-- 头部搜索部分 -->
            <a-form layout="inline" :model="queryParams" autocomplete="off" ref="formRef">
                <a-form-item :label="t('name')">
                    <a-input v-model:value="queryParams.filter.processName" />
                </a-form-item>
                <a-form-item :label="t('type')" class="form-input_width">
                    <a-select v-model:value="queryParams.filter.processType">
                        <a-select-option v-for="type in processTypeList" :key="type.value" :value="type.value">
                            {{ type.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <div class="action-btns">
                    <a-button type="primary" @click="handleChangeParams">
                        {{ t('search') }}
                    </a-button>
                    <a-button class="al-m-l-16" @click="handleResetQuery">
                        {{ t('reset') }}
                    </a-button>
                </div>
            </a-form>
        </a-card>

        <!-- 新增按钮 -->
        <a-row type="flex" justify="space-between">
            <a-col class="classified-resources_operate">
                <a-button type="primary" @click="handlePushOperation">
                    {{ t('creat') }}
                </a-button>
            </a-col>
        </a-row>

        <!-- 表格部分 -->
        <div class="flow-content">
            <a-table
                v-if="pageData.columns.length"
                :columns="pageData.columns"
                :data-source="pageData.data"
                :loading="pageData.loading"
                :pagination="pageData.pagination"
                rowKey="id"
                :scroll="{}"
                @change="handleTableChange"
            >
                <template #bodyCell="{ column, record }">
                    <!-- 发布状态 -->
                    <template v-if="column.key === 'processType'">
                        {{ findProcessType[record.processType] }}
                    </template>
                    <template v-if="column.key === 'publishStatusName'">
                        {{ record.publishStatus === 'UNPUBLISHED' ? t('unpublish') : t('publish') }}
                    </template>
                    <!-- 操作按钮 -->
                    <template v-if="column.key === 'action'">
                        <!-- 编辑动作 -->
                        <a-button type="text" primary @click="handleGoDetail(record)">
                            {{ t('edit') }}
                        </a-button>
                        <a-divider type="vertical" />
                        <!-- 删除动作 -->
                        <a-button type="text" danger @click="handleWorkflowOperation(record, 'delete')">
                            {{ t('delete') }}
                        </a-button>
                        <a-divider v-if="record.publishStatus === 'UNPUBLISHED'" type="vertical" />
                        <a-button
                            v-if="record.publishStatus === 'UNPUBLISHED'"
                            type="text"
                            @click="handleWorkflowOperation(record, 'publish')"
                        >
                            {{ t('publish') }}
                        </a-button>
                        <a-divider v-if="record.publishStatus === 'REPUBLISH'" type="vertical" />
                        <a-button
                            v-if="record.publishStatus === 'REPUBLISH'"
                            type="text"
                            @click="handleWorkflowOperation(record, 'publish')"
                        >
                            {{ t('rePublish') }}
                        </a-button>
                    </template>
                </template>
            </a-table>
        </div>
        <!-- 删除逻辑 -->
        <a-modal
            v-model:visible="operationVisible"
            :ok-text="t('confirm')"
            :cancelText="t('cancel')"
            @ok="handleConfirm"
        >
            <p>{{ t('delConfirm') }}</p>
        </a-modal>
    </div>
</template>

<script lang="ts">
    import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { useI18n } from 'vue-i18n'
    import { ProcessType } from '@/enums/commonConstant'
    // hooks-封装的tableMix
    import useTableBase from '@/hooks/useTable'
    // 工具函数导入
    import { $getPublishedApplicationId } from '@/utils/common'
    // api接口
    import { getWorkflowList, delWorkflowProcess, putWorkflowProcessRelease } from '@/apis/sys/workFlow'

    export default defineComponent({
        name: 'Flow',
        setup() {
            // 路由
            const router = useRouter()
            const route = useRoute()
            // 国际化
            const { t } = useI18n()
            // 查询条件的数据
            const queryParams = reactive({
                filter: {
                    processName: '',
                    processType: '',
                    applicationId: $getPublishedApplicationId()
                    // applicationId: 10000324
                },
                sort: {
                    field: 'createdDate',
                    direction: 'DESC'
                }
            })

            // 表格的列信息
            const columns = [
                // 流程名称
                {
                    key: 'processName',
                    dataIndex: 'processName',
                    title: t('name')
                },
                // 流程类型
                {
                    key: 'processType',
                    dataIndex: 'processType',
                    title: t('type')
                },
                // 发布状态
                {
                    key: 'publishStatusName',
                    dataIndex: 'publishStatusName',
                    title: t('status')
                },
                // 创建时间
                {
                    key: 'createdDate',
                    dataIndex: 'createdDate',
                    title: t('creatTime')
                },
                // 操作
                {
                    key: 'action',
                    title: t('operation')
                }
            ]
            // 表格所有信息
            let pageData: PageData = reactive({
                // 表单列
                columns,
                // 表单数据
                data: [],
                // 请求表单接口加载状态
                loading: false,
                // 请求列表是否出现错误
                error: false,
                // 请列表请求api
                fetchApi: getWorkflowList,
                // 表单选择的主键
                selectedRowKeys: [],
                // 克隆表单数据用于编辑
                cacheData: [],
                pagination: {
                    // table 总数
                    total: 0,
                    pageNo: 1,
                    pageSize: 10
                }
            })

            const findProcessType = {
                FORM_PROCESS: '表单流程',
                SYSTEM_MANAGEMENT: '系统管理'
            }
            // hooks函数
            const { handleChangeParams, handleTableChange } = useTableBase(queryParams, pageData)

            // 计算属性
            const processTypeList = computed(() => {
                return [
                    {
                        label: t('all'),
                        value: ''
                    },
                    ...ProcessType
                ]
            })

            // 表格删除-弹框。显隐变量
            const operationVisible = ref<boolean>(false)
            // 流程id
            const operationId = ref<number>()
            // 执行动作的类型
            const operationType = ref<string>('')
            const confirmLoading = ref<boolean>(false)

            // 方法
            // 重置form表单
            const handleResetQuery = () => {
                queryParams.filter.processName = ''
                queryParams.filter.processType = ''
                handleChangeParams()
            }

            // 新建
            const handlePushOperation = () => {
              const layoutPlanId = route.meta.layoutPlanId ? route.meta.layoutPlanId : route.query.layoutPlanId
              const settingId = route.meta.settingId || ''
              if (layoutPlanId && settingId) {
                router.push({ name: 'FLOW_OPERATION', query: { layoutPlanId, settingId } })
              } else {
                router.push({ name: 'FLOW_OPERATION' })
              }
            }

            // 表格部分-按钮事件>>>编辑
            const handleGoDetail = item => {
              const layoutPlanId = route.meta.layoutPlanId ? route.meta.layoutPlanId : route.query.layoutPlanId
              const settingId = route.meta.settingId || ''
              if (layoutPlanId && settingId) {
                router.push({
                  name: 'FLOW_OPERATION',
                  query: { id: item.id, layoutPlanId, settingId }
                })
              } else {
                router.push({ name: 'FLOW_OPERATION', query: { id: item.id } })
              }
            }

            // 表格部分-按钮事件>>>publish---流程操作
            const handleWorkflowOperation = (record, type) => {
                operationId.value = record.id
                operationType.value = type
                operationVisible.value = true
            }

            // 删除方法
            const handleConfirm = () => {
                const actions = {
                    delete: delWorkflowProcess,
                    publish: putWorkflowProcessRelease
                }

                if (actions[operationType.value]) {
                    confirmLoading.value = true
                    actions[operationType.value](operationId.value).then(() => {
                        operationVisible.value = false
                        handleChangeParams()
                    })
                }
            }

            // 生命周期
            onMounted(() => {
                handleChangeParams()
            })

            return {
                // 查询数据
                queryParams,
                // 表格基本信息-列
                pageData,
                // 国际化
                t,
                // 计算属性
                processTypeList,
                // 查询接口
                handleChangeParams,
                // 重置
                handleResetQuery,
                // 新建
                handlePushOperation,
                // hooks-中的方法
                handleTableChange,
                // 表格部分-按钮事件>>>编辑
                handleGoDetail,
                // 表格部分-按钮事件>>>publish
                handleWorkflowOperation,
                ProcessType,
                findProcessType,
                // 表格删除动作-控制弹框显隐
                operationVisible,
                // 删除方法
                handleConfirm
            }
        }
    })
</script>

<style lang="less" scoped>
    .flow-warp {
        padding: 0 24px 24px 24px;
        zoom: 1;
        // 按钮-查询和重置
        .search-card {
            padding: 24px 0 12px 0;
            margin-bottom: 12px;
            border-bottom: 1px solid #e8e8e8;

            :deep(.@{ant-prefix}-card-body) {
                padding: 0;
            }

            .action-btns {
                display: inline-block;

                .al-m-l-16 {
                    margin-left: 16px;
                }
            }

            :deep(.@{ant-prefix}-select) {
                min-width: 150px;
            }
        }
        // 表格部分
        .flow-content {
            margin: 24px 0;
        }
    }
</style>

<i18n>
zh-CN:
  all: '全部'
  number: '序号'
  name: '流程名称'
  type: '流程类型'
  status: '发布状态'
  creatTime: '创建时间'
  operation: '操作'
  search: '查询'
  reset: '重置'
  creat: '新建'
  edit: '编辑'
  delete: '删除'
  publish: '发布'
  rePublish: '重新发布'
  unpublish: '未发布'
  cancel: '取消'
  confirm: '确定'
  delConfirm: '是否确认进行该流程操作?'
en-US:
  all: 'all'
  number: 'Serial number'
  name: 'Process name'
  type: 'Process type'
  status: 'Release status'
  creatTime: 'Creation time'
  operation: 'operation'
  search: 'Query'
  reset: 'Reset'
  creat: 'newly build'
  edit: 'edit'
  delete: 'delete'
  publish: 'release'
  rePublish: 'Republish'
  unpublish: 'Unpublished'
  cancel: 'cancel'
  confirm: 'determine'
  delConfirm: 'Are you sure to proceed with this process?'
</i18n>
